<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Search Bar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<style>
	body {
	  margin: 0;
	  display: flex;
	  justify-content: center;
	  height: 100vh;
	  align-items: center;
	  background-color: aliceblue;
	}
	
	.search-bar-container {
	  display: flex;
	  align-items: center;
	  background-color: aliceblue;
	  padding: 5px;
	  width: 300px;
	  height: 50px;
	  border-radius: 50px;
	  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2),
	    -6px -6px 10px rgba(255, 255, 255, 0.7);
	  margin: 10px;
	  position: relative;
	  transition: width 1.5s;
	}
	
	.magnifier {
	  width: 25px;
	  cursor: pointer;
	  position: absolute;
	  left: 20px;
	}
	
	.mic-icon {
	  width: 30px;
	  position: absolute;
	  right: 10px;
	  transition: width 0.4s;
	  transition-delay: 1s;
	}
	
	.input {
	  background-color: transparent;
	  border: none;
	  margin: 10px 50px;
	  width: 100%;
	  outline: none;
	  color: rgb(100, 100, 100);
	  transition: width 1s;
	  transition-delay: 0.5s;
	  font-weight: bold;
	}
	
	.active.search-bar-container {
	  width: 50px;
	}
	
	.active .input {
	  width: 0;
	}
	
	.active .mic-icon {
	  width: 0;
	}
</style>
<body>
  <div class="search-bar-container active">
    <img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png" alt="magnifier"
      class="magnifier" />
    <input type="text" class="input" placeholder="Search ..." />
    <img src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-25-512.png" alt="mic-icon"
      class="mic-icon" />
  </div>
</body>
<script>
	const searchBarContainerEl = document.querySelector(".search-bar-container");
	
	const magnifierEl = document.querySelector(".magnifier");
	
	magnifierEl.addEventListener("click", () => {
	  searchBarContainerEl.classList.toggle("active");
	});
</script>
</html>